在处理 ngrx-effects 时捕获错误并发出不同的操作

Question

在下面的代码片段中，我想在更新操作成功时发出 GetData 操作，如果不成功则发出 BackendError 操作。

@Effect()
updateData$ = this.actions$.pipe(
  ofType(MyActionType.UPDATE_DATA),
  map((action: UpdateData) => action.payload),
  combineLatest(this.authService.getUser(), (myData, user) => this.dataService.updateData(myData, user)),
  map(() => new GetData()),
  catchError((err) => { of(new BackendError(err)))
);

上面的代码似乎不起作用。即使更新操作由于权限错误而失败，也不会发出 BackendError 操作。

感谢任何帮助。

Answer 1

您当前的实现将吞噬 updateData 操作的错误，因为 action$（外部可观察对象）被映射到 new GetData() 操作，而不管 updateData 操作（成功或失败）。

在下面的实现中，如果 updateData 操作（dataUpdate$ -- 内部可观察对象）抛出错误，catchError 运算符将运行..

@Effect()
updateData$ = this.actions$.pipe(
  ofType(MyActionType.UPDATE_DATA),
  mergeMap((action: UpdateData) => {
    const user$ = this.authService.getUser();
    const dataUpdate$ = user$.pipe(
      mergeMap(user => this.dataService.updateData(action.payload, user));
    );
    return dataUpdate$.pipe(
      map(() => new GetData()),
      catchError(err => of(new BackendError(err)))
    );
  })
);

其他资源

这里有一些关于 mergeMap 之间的区别的更多信息和 map.
mergeMap 的官方文档。
@Effect 在 @ngrx/effects README 中使用此方法的示例。

在处理 ngrx-effects 时捕获错误并发出不同的操作

catch error and emit different action when handling ngrx-effects

rxjs

ngrx

ngrx-effects